import React, { useState } from 'react'
import { Affix, Button } from 'antd'
import type { AffixProps } from 'antd'

/**
 * Affix 组件示例
 * @returns {JSX.Element} Affix 演示组件
 */
const AffixDemo: React.FC = () => {
	const [top, setTop] = useState<number>(100)
	const [bottom, setBottom] = useState<number>(10)

	/**
	 * Affix 状态改变时的回调
	 * @param affixed - 是否固定
	 */
	const onChange: AffixProps['onChange'] = (affixed) => {
		console.log('固定状态改变：', affixed)
	}

	return (
		<div style={{ height: '600px', padding: '20px' }}>
			{/* 顶部固定示例 */}
			<Affix offsetTop={top} onChange={onChange}>
				<Button type="primary" onClick={() => setTop(top + 10)}>
					距离顶部 {top}px 固定
				</Button>
			</Affix>

			<div style={{ height: '300px' }}></div>

			{/* 底部固定示例 */}
			<Affix offsetBottom={bottom}>
				<Button type="primary" onClick={() => setBottom(bottom + 10)}>
					距离底部 {bottom}px 固定
				</Button>
			</Affix>

			{/* 固定在容器内 */}
			<div
				style={{
					height: '200px',
					border: '1px solid #ccc',
					marginTop: '20px',
					overflow: 'auto',
					padding: '20px'
				}}
			>
				<Affix target={() => document.getElementById('container')}>
					<Button type="primary">固定在滚动容器内</Button>
				</Affix>
				<div style={{ height: '400px' }}></div>
			</div>
		</div>
	)
}

export default AffixDemo
